<template>
	<view class="hot-list-content">
		<image src="https://cdn.uviewui.com/uview/swiper/swiper2.png" class="monthly-lists" mode=""></image>
		<view class="hot-content">
			<view class="content-title">
				热销榜单
			</view>
			<view class="list-content" v-for="(item,index) in hotListData" :key="index" @click="hotCommodity">
				<!-- <u-icon class="" name="bookmark"></u-icon> -->
				<image :src="item.src" class="content-image" mode=""></image>
				<view class="content-right">
					<view class="content-name">{{ item.name }}</view>
					<view class="content-purchase">{{ item.purchase }}</view>
					<view class="content-price">
						<text class="contnet-discount">￥{{ item.discount }}<text class="content-original">￥{{ item.original }}</text></text>
						<button class="content-button">立即抢购</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 热销榜单数据
				hotListData:[
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper1.png', name:'1000克', purchase:'已有1人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper2.png', name:'1000克', purchase:'已有2人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper3.png', name:'1000克', purchase:'已有3人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper1.png', name:'1000克', purchase:'已有4人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper2.png', name:'1000克', purchase:'已有5人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper3.png', name:'1000克', purchase:'已有6人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper1.png', name:'1000克', purchase:'已有7人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper2.png', name:'1000克', purchase:'已有8人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper3.png', name:'1000克', purchase:'已有9人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper1.png', name:'1000克', purchase:'已有10人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper2.png', name:'1000克', purchase:'已有11人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper3.png', name:'1000克', purchase:'已有12人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper1.png', name:'1000克', purchase:'已有13人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper2.png', name:'1000克', purchase:'已有14人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper3.png', name:'1000克', purchase:'已有15人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper1.png', name:'1000克', purchase:'已有16人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper2.png', name:'1000克', purchase:'已有17人购买', discount:'20', original:'30' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper3.png', name:'1000克', purchase:'已有18人购买', discount:'20', original:'30' },
				],
			}
		},
		methods: {
			hotCommodity(){
				uni.navigateTo({
					url:'/pages/index/productDetails/productDetails'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 清除按钮默认的样式

	.monthly-lists {
		width: 100%;
		height: 400rpx;
	}

	.hot-content {
		background-color: rgb(246, 246, 246);
		padding: 0rpx 20rpx 0rpx 20rpx;
	}

	.list-content {
		width: 100%;
		background-color: #fff;
		display: flex;
	}

	.content-title {
		text-align: center;
		font-size: 40rpx;
	}

	.list-content {
		width: 100%;
	}

	.content-image {
		width: 250rpx;
		height: 250rpx;
		margin: 20rpx 20rpx 20rpx 20rpx;
	}
	
	.content-right{
		
	}
	
	.content-name{
		margin-top: 20%;
		margin-bottom: 30rpx;
	}
	
	.content-purchase{
		border-radius: 50rpx;
		color: #F79C11;
		background-color: rgb(254, 245, 230,);
		padding: 0rpx 20rpx 0rpx 20rpx;
		margin-bottom: 40rpx;
		width: 200rpx;
		text-align: center;
	}
	
	.content-price{
		display: flex;
	}
	
	.contnet-discount{
		color: red;
		font-size: 40rpx;
	}
	
	.content-original{
		color: #ccc;
		text-decoration: line-through;
		margin-left: 20rpx;
	}
	
	.content-button{
		width: 180rpx;
		border-radius: 50rpx;
		background-color: red;
		color: white;
		padding: 10rpx 20rpx 10rpx 20rpx;
		margin-left: 40rpx;
	}
	
	button::after {
		border: none;
	}
	
	button {
		padding-left: 20rpx;
		padding-right: 20rpx;
		text-align: center;
		line-height: 1.35;
		overflow: hidden;
		height: 100%;
	}
</style>